<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<style>
    *{
        padding: 0;
        margin: 0;
    }

    #LBT{
        width: 812px;
        border: 3px #ccc solid;
        position: relative;
    }

    #LBT a{
        text-decoration: none;

    }

    #LBT .tu{
        display: none;
        height: 402px;
    }

    #LBT .tu.active{
        display: block;
    }

    #LBT #XXK{
        height: 50px;
    }

    #LBT #XXK ul li{
        list-style-type: none;
        float: left;
        width: 160px;
        border-right: 3px solid #ccc;
        line-height: 50px;
        text-align: center;
    }
    #LBT #XXK ul li.active{
        background-color: #e43126;
    }
    #LBT #XXK ul li:last-child{
        border: none;
    }
    #LBT #title{
        position: absolute;
        bottom: 0px;
    }
    #LBT #title .t{
        display: none;
        height: 40px;
        background: rgba(10, 10, 10, 0.3);
        width: 802px;
        line-height: 40px;
        padding-left: 10px;
    }
    #LBT #title a{
        color: snow;
    }
    #LBT #title a:hover{
        text-decoration: underline;
    }
    #LBT #title .t.active{
        display: block;
    }
    #LBT #cycle{
        position: absolute;
        bottom: 0px;
        right: 10px;
        height: 40px;

    }
    #LBT #cycle div{
        height: 16px;
        width: 16px;
        background: rgba(100, 100, 100, 0.9);
        float: left;
        border-radius: 50%;
        margin-right: 10px;
        margin-top: 12px;
    }
    #LBT #cycle div.active{
        background: rgba(250, 250, 250, 0.8);
    }
</style>
<div id="LBT">
    <div id="XXK">
        <ul>
            <li class="active"><a href="">第1个</a></li>
            <li><a href="">第2个</a></li>
            <li><a href="">第3个</a></li>
            <li><a href="">第4个</a></li>
            <li><a href="">第5个</a></li>
        </ul>
    </div>
    <div id="img">
        <div class="tu active"><a href=""><img src="cf1.jpg" alt=""></a></div>
        <div class="tu"><a href=""><img src="cf2.jpg" alt=""></a></div>
        <div class="tu"><a href=""><img src="cf3.jpg" alt=""></a></div>
        <div class="tu"><a href=""><img src="cf4.jpg" alt=""></a></div>
        <div class="tu"><a href=""><img src="cf5.jpg" alt=""></a></div>
    </div>
    <div id="title">
        <div class="t active"><a href="">这里是各个图的标题啊1</a></div>
        <div class="t"><a href="">这里是各个图的标题啊2</a></div>
        <div class="t"><a href="">这里是各个图的标题啊3</a></div>
        <div class="t"><a href="">这里是各个图的标题啊4</a></div>
        <div class="t"><a href="">这里是各个图的标题啊5</a></div>
    </div>
    <div id="cycle">
        <div class="active"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>


<script>


    var img = document.querySelectorAll('#img div');
    var cycle = document.querySelectorAll('#cycle div');
    var title = document.querySelectorAll('#title div');
    var XXK = document.querySelectorAll('#XXK li');

    var XH = setInterval(function () {

        var index = getIndex();
        var next = index + 1;

        if(next > 4){
            next = 0;
        }
        GD(index, next)

    }, 2000);


    var DD = document.getElementById('cycle');

    DD.addEventListener('mouseover', Ting);
    function Ting(e) {
        var point = e.target;
        //当点到小圆点的时候
        if(point.getAttribute('id') != 'cycle'){
            var num = overObj(point, cycle);
            var current = getIndex();
            GD(current, num);
            clearInterval(XH)
        }
    }

    DD.addEventListener('mouseout', KS);
    function KS(e) {
        var point = e.target;
        if(point.getAttribute('id') != 'cycle'){
            XH = setInterval(function () {

                var index = getIndex();
                var next = index + 1;

                if(next > 4){
                    next = 0;
                }
                GD(index, next)

            }, 2000)
        }
    }


    function overObj(obj, Objects) {

        for (var i = 0; i < Objects.length; i++) {
            if (obj == Objects[i]){
                return i;
            }
        }
    }

    /**
     * 获取当前的那个图片在显示状态
     * @returns {number}
     */
    function getIndex() {
        var img = document.querySelectorAll('#img div');
        for (var i = 0; i < img.length; i++) {
            if(img[i].classList.contains('active')){
                return i
            }
        }
    }

    function GD(index, next) {
        img[index].classList.remove('active');
        img[next].classList.add('active');

        cycle[index].classList.remove('active');
        cycle[next].classList.add('active');

        title[index].classList.remove('active');
        title[next].classList.add('active');

        XXK[index].classList.remove('active');
        XXK[next].classList.add('active');
    }

    // function f() {
    //
    // }

    


</script>

</body>
</html>